<template>
  <div class="table-data-div" v-show="showHideBool"
       :class="isSpatialDataBool?'table-data-div-min':'table-data-div-max'"
       :style="[isSpatialDataBool&&showSelectId?{height:'200px'}:{}]">
    <div class="table-data-header">{{ currentLayerName }}数据</div>
    <div class="table-data-closer" @click="hideTableDiv"></div>
    <!--基础数据信息表格-->
    <div style="width:100%;">
      <!--<el-table :data="allTableDataList" :height="tableHeight" stripe :header-cell-style="{textAlign:'center'}" :cell-style="{textAlign:'center'}" style="width: 100%">
        <el-table-column v-for="col of allTableTitleList" :key="col.prop" :prop="col.prop" :label="col.label"
                         :formatter="(row, column) => dictChange(row, column, currentLayerCode)" show-overflow-tooltip></el-table-column>
      </el-table>-->
      <div class="new-queryTableDiv">
        <el-table :data="workforceTemDataCurrect" ref="myTable" border v-loading="tableLoading"
                  :height="tableHeight" stripe :header-cell-style="{textAlign:'center'}" :cell-style="{textAlign:'center'}" style="width: 100%">
          <el-table-column v-for="col of tableTitleArray" :key="col.prop" :prop="col.prop" :label="col.label" :width="col.width"
                           :formatter="(row, column) => dictChange(row, column, currentLayerCode)" show-overflow-tooltip></el-table-column>
        </el-table>
      </div>
      <!--分页显示-->
      <div class="new-queryTableDiv-page">
        <el-pagination v-if="totalCount>0 && showSelectId==false"
                       v-model:current-page="currentPage"
                       v-model:page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="totalCount"
                       @current-change="handleCurrentChange" @size-change="handleSizeChange"
        />
      </div>
    </div>
  </div>
</template>
<script>
import { queryDataByVersionCode } from "@/api/datamanage/basicData/indexMap.js";

export default {
  name: "IndexTable",
  components: {

  },
  props:{
    allTableDataBool: {//是否显示表格面板
      type:Boolean,
      required:true,
      default:false
    },
    isSpatialDataBool: {//是否空间数据
      type:Boolean,
      required:true,
      default:false
    },
    currentLayerName: {//当前数据类型name
      type:String,
      required:true,
      default:""
    },
    currentLayerCode: {//当前数据类型code
      type:String,
      required:true,
      default:""
    },
    currentVersionCode: {//当前数据类型版本号
      type:String,
      required:true,
      default:""
    },
    allTableDataList: {//查询图层表格数据列表
      type:Array,
      required:true,
      default: []
    },
    allTableTitleList: {//查询图层表格表头字段列表
      type:Array,
      required:true,
      default: []
    },
    selectId: {//选中1条数据的ID
      type:String,
      required:true,
      default:""
    },
    total: {//总数据量
      type:Number,
      required:true,
      default:0
    },
  },
  emits:[],
  data() {
    return {
      //显示隐藏表格面板
      showHideBool:false,
      //表格高度
      tableHeight:130,
      //当前分页展示数据列表
      workforceTemDataCurrect:[],
      //是否显示加载中
      tableLoading:false,
      //表头字段数组
      tableTitleArray:[],
      //分页显示表格数据
      currentPage:1,//当前页码
      pageSize:10,//每页显示数据数量
      totalCount:0,//总数据量
      showSelectId:false,//是否显示1条数据详情
    }
  },
  watch: {
    allTableDataBool: {//是否显示表格面板
      handler: function(newVal,oldVal){
        if(newVal!=oldVal){
          this.showHideBool = newVal;
          //查询数据
          this.queryTableData();
        }
      },
      immediate:true
    },
    isSpatialDataBool: {//是否空间数据
      handler: function(newVal,oldVal){
        if(newVal!=oldVal){
          //设置表格高度
          if(newVal){
            this.tableHeight = 130;
          }else{
            this.tableHeight = 330;
          }
        }
      },
      immediate:true
    },
    currentLayerName: {//当前数据类型name
      handler: function(newVal,oldVal){
        if(newVal!=oldVal){

        }
      },
      immediate:true
    },
    currentLayerCode: {//当前数据类型code
      handler: function(newVal,oldVal){
        if(newVal!=oldVal){

        }
      },
      immediate:true
    },
    currentVersionCode: {//当前数据类型版本号
      handler: function(newVal,oldVal){
        if(newVal!=oldVal){

        }
      },
      immediate:true
    },
    allTableDataList: {//查询图层表格数据列表
      handler: function(newVal,oldVal){
        if(newVal!=oldVal){
          if(this.showHideBool){
            let that = this;
            /*this.$nextTick(()=>{
              //获取分页数据
              that.getDataByPage(true);
            });*/
            console.log("查询图层表格数据列表");
            this.workforceTemDataCurrect = newVal;
          }
        }
      },
      immediate:true
    },
    allTableTitleList: {//查询图层表格表头字段列表
      handler: function(newVal,oldVal){
        if(newVal!=oldVal){
          let tempTableTitleArray = newVal;
          if(newVal!=null && newVal.length>0){
            for(let i=0;i<newVal.length;i++){
              let label = newVal[i].label;
              //根据文字长度设置列宽度防止表头文字换行显示
              let width = "";
              if(label && label.length > 3 && newVal.length>10){//防止字段少的表格显示样式不美观
                width = label.length * 25;
                tempTableTitleArray[i].width = width;
              }
            }
          }
          //表头字段数组
          this.tableTitleArray = tempTableTitleArray;
        }
      },
      immediate:true
    },
    selectId: {//选中1条数据的ID
      handler: function(newVal,oldVal){
        if(newVal!=oldVal){

        }
      },
      immediate:true
    },
    total: {//总数据量
      handler: function(newVal,oldVal){
        this.totalCount = newVal;
      },
      immediate:true
    },
  },
  mounted() {

  },
  methods: {
    //隐藏表格面板
    hideTableDiv(){
      this.showHideBool = false;
    },
    //字段解析数据显示
    dictChange(data, element, dictName) {
      const col = element.property;
      const dictArr = this.getDictArray(dictName,col);
      if (dictArr!=null && dictArr.length>0) {
        for (let item of dictArr) {
          if (item.code === data[col]) {
            return item.name;
          }
        }
      }

      return data[col];
    },
    //获取字典数组
    getDictArray(dictName,colName){
      let array = null;
      if(dictName=="sjxzq"){//省级行政区
        array = [];
      }else if(dictName=="djxzq"){//地级行政区
        array = [];
      }else if(dictName=="xjxzq"){//县级行政区
        array = [];
      }else if(dictName=="xjxzq1"){//乡级行政区
        array = [];
      }else if(dictName=="sjxzzx"){//省级行政中心
        array = [];
      }else if(dictName=="djxzzx"){//地级行政中心
        array = [];
      }else if(dictName=="xjxzzx"){//县级行政中心
        array = [];
      }else if(dictName=="xjxzzx1"){//乡级行政中心
        array = [];
      }else if(dictName=="xzcszd"){//行政村所在地
        array = [];
      }else if(dictName=="yg1"){//遥感
        array = [];
      }else if(dictName=="dc"){//断层
        array = [];
      }else if(dictName=="dcyx1"){//地层岩性
        array = [];
      }else if(dictName=="wxxsjpgad"){//危险性数据PGA点
        array = [];
      }else if(dictName=="wxxsjdjd"){//危险性数据等级点
        array = [];
      }else if(dictName=="wxxsjdjm"){//危险性数据等级面
        array = [];
      }else if(dictName=="ls434ysqzml"){//历史4 3/4以上强震目录
        array = [];
      }else if(dictName=="1970nylxzml"){//1970年以来小震目录
        array = [];
      }else if(dictName=="whqy1"){//危化企业
        if(colName="typeHazardousChemicals"){//危化品类型
          array = [
            { code:"1",name:"爆炸品" },
            { code:"2",name:"压缩气体和液化气体" },
            { code:"3",name:"易燃液体" },
            { code:"4",name:"易燃固体、自然物品和遇湿易燃物品" },
            { code:"5",name:"氧化物和有机氧化物" },
            { code:"6",name:"有毒品" },
            { code:"7",name:"放射性物品" },
            { code:"8",name:"腐蚀品" },
          ];
        }
      }else if(dictName=="jyjqz1"){//加油（加气）站
        array = [];
      }else if(dictName=="wxhxpfswxy"){//危险化学品、放射危险源
        array = [];
      }else if(dictName=="csbncs"){//城市避难场所
        array = [];
      }else if(dictName=="wzcbk"){//物资储备库
        array = [];
      }else if(dictName=="dzyjyab"){//地震应急预案表
        array = [];
      }else if(dictName=="jzwgwsj"){//建筑物格网数据
        array = [];
      }else if(dictName=="czzz"){//城镇住宅
        array = [];
      }else if(dictName=="czfzz"){//城镇非住宅
        array = [];
      }else if(dictName=="nczzdlzz"){//农村住宅（独立住宅）
        array = [];
      }else if(dictName=="nczzjhzz"){//农村住宅（集合住宅）
        array = [];
      }else if(dictName=="fzyf"){//辅助用房
        array = [];
      }else if(dictName=="ncfzz"){//农村非住宅
        array = [];
      }else if(dictName=="dl1"){//道路
        array = [];
      }else if(dictName=="ql1"){//桥梁
        array = [];
      }else if(dictName=="jc1"){//机场
        array = [];
      }else if(dictName=="xxb"){//学校表
        array = [];
      }else if(dictName=="yy1"){//医院
        array = [];
      }else if(dictName=="rktjb"){//人口统计表
        array = [];
      }else if(dictName=="rkglwgsj"){//人口公里网格数据
        array = [];
      }

      return array;
    },
    //获取分页数据
    getDataByPage(bool){
      if(bool){
        //设置默认显示10条数据
        this.workforceTemDataCurrect = [];
        let allLength = this.allTableDataList.length;
        for (let i = 0; i <= 9; i++) {
          if(i<allLength){
            this.workforceTemDataCurrect.push(this.allTableDataList[i]);
          }
        }
        // 获取需要绑定的table
        this.dom = this.$refs.myTable.$el.getElementsByClassName("el-scrollbar__wrap")[0];
        this.dom.addEventListener('scroll', () => {
          // 表格滚动条滚动的距离
          let scrollTop = this.dom.scrollTop;
          // 变量windowHeight是可视区的⾼度
          // let windowHeight = this.dom.clientHeight
          // 变量scrollHeight是滚动条的总⾼度
          let scrollHeight = this.dom.scrollHeight
          let clientHeight = this.dom.clientHeight
          let scrollBottom = scrollHeight - scrollTop - clientHeight
          if (scrollBottom < 1) {      // 这里就是滚动条滚动到底部的时候
            // 获取到的不是全部数据当滚动到底部继续获取新的数据
            // 这里记住我们要把表格渲染的数据和获取到的全部数据分开, 等滑动到底部时我们在取10或者20条添加到渲染数据上
            if (this.allTableDataList.length <= this.workforceTemDataCurrect.length) return; // 因为我们默认都是渲染20条数据,如果总数据没那么多就直接return出去
            //this.tableLoading = true;  // 开启loading效果防止渲染速度慢用户乱点,导致页面崩溃

            if (this.workforceTemDataCurrect.length + 10 > this.allTableDataList.length) {
              // 如果allTableDataList和workforceTemDataCurrect选差没有十条那么就全部渲染上去
              this.dom.scrollTop = this.dom.scrollTop - 30;   // 30 50 都行
              this.workforceTemDataCurrect.push(...this.allTableDataList);
            } else {
              this.dom.scrollTop = this.dom.scrollTop - 30;
              let id = this.workforceTemDataCurrect.length;
              // 这里取10条,渲染上去 拿多少数据循环多少次就行
              for (let index = id; index <= id + 9; index++) {  // 没有用forEach 因为场景不同这里用 forEach 效率会低
                this.workforceTemDataCurrect.push(this.allTableDataList[index]);
              }
            }
            /*setTimeout(() => {
              this.tableLoading = false;
            }, 500);*/
          }
        });
      }
    },
    //分页大小改变
    handleSizeChange(val) {
      console.log("分页大小改变"+val);
      // 改变每页显示的条数
      this.pageSize = val;
      // 注意：在改变每页显示的条数时，要将页码显示到第一页
      this.currentPage = 1;
      // this.queryTableData();
    },
    //当前页码改变
    handleCurrentChange(val) {
      console.log("当前页码改变"+val);
      this.currentPage = val;
      this.queryTableData();
    },
    //查询数据
    queryTableData(){
      let id = this.selectId;
      if(id==="" || id==null){//查询全部
        this.showSelectId = false;
        //分页查询数据
        this.queryTableDataByPage();
      }else{//根据ID查询
        this.showSelectId = true;
      }
    },
    queryTableDataByPage(){
      let that = this;
      let typeCode = this.currentLayerCode;
      let versionCode = this.currentVersionCode;
      let page = this.currentPage;
      let rows = this.pageSize;
      let spatialBool = this.isSpatialDataBool;
      //数据查询
      this.tableLoading = true;
      // if(typeCode=="sjxzq" || typeCode=="djxzq" || typeCode=="xjxzq" || typeCode=="xjxzq1"){//行政区划
      //   rows = 10;
      // }
      let params = {
        typeCode : typeCode,//三级数据类别（数据表）code
        versionCode : versionCode,//版本号
        page:page,//页码
        rows:rows,//分页数据量
      }
      console.log("params");
      console.log(params);
      //查询版本号对应图层数据
      queryDataByVersionCode(params).then((response) => {
        nextTick(() => {
          console.log("查询版本号对应图层数据结果");
          console.log(response.data);
          let resultList = response.data;//data,title,page,rows,total,totalPage
          let totalPage = resultList.totalPage;
          that.totalCount = resultList.total;
          this.workforceTemDataCurrect = resultList.data;//图层表格数据列表
          that.tableLoading = false;
        });
      }).catch(err => {
        that.tableLoading = false;
      });
    },
  }
}
</script>
<style scoped>
.table-data-div {
  position:absolute;left:0px;bottom:0px;width: 100%;background:#fff;/*padding:20px;*/
  z-index: 100;border-top: 1px solid #e5ebf7;
}

.table-data-div-max {
  /*height:400px;*/
  height:430px;
}
.table-data-div-min {
  /*height:200px;*/
  height:230px;
}

.table-data-header {
  background: #e5ebf7;color:#107ce5;border-bottom:1px solid #107ce5;width: fit-content;
  font-size: 16px;margin-bottom: 10px;padding: 8px 16px;
}

.table-data-closer {
  text-decoration: none;
  position: absolute;
  top: 14px;
  right: 20px;
  color:#68798b;
}
.table-data-closer:after {
  content: "✖";
}

.new-queryTableDiv {
  position: absolute;
  left:0px;
  right:0px;
  top:50px;
  bottom:50px;
}
.new-queryTableDiv-page {
  position: absolute;
  left:0px;
  right:0px;
  bottom:0px;
  height:50px;
  padding: 8px;
}

</style>